<template>
  <div class="apps">
    <van-search
      placeholder="请输入搜索关键词"
      disabled
      @click="$router.push('/apps/searchpopup')"
    />

    <!-- 点击搜索弹出框 -->
    <!-- <transition name="slide"> -->
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>

    <div class="tag">
      <!-- Sidebar 侧边导航 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.name"
          v-for="item in categoryList"
          :key="item.id"
          @click='changeTagVal(item.id)'
        />
      </van-sidebar>

      <!-- 导航展示 -->
      <div class="tagShow" >
        <div class="imgbox">
          <img
            :src="currentCategory.banner_url"
            alt=""
            width="95%"
            height="140px"
          />
          <h5>{{currentCategory.front_name}}</h5>
        </div>

        <!-- 分割线 -->
        <van-divider
          :style="{
            color: '#000',
            borderColor: '#ccc',
            padding: '0 100px 0 100px',
          }"
        >
          <div>{{currentCategory.name}}</div>
        </van-divider>

        <!-- 宫格 -->
        <van-grid :column-num="3" > 
          <van-grid-item v-for="item in currentCategory.subCategoryList" :key='item.id' :icon="item.wap_banner_url" :text="item.name" />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { catalogIndex,catalogCurrent  } from "@/request/api";
export default {
  data() {
    return {
      categoryList: [],
      activeKey: 0,
      currentCategory:{},
     
    };
  },
  created() {
    catalogIndex().then((res) => {
      // console.log(res);
      let { categoryList ,currentCategory} = res.data;
      this.categoryList = categoryList;
      this.currentCategory=currentCategory
    });
  },
  methods:{
    changeTagVal(id){
     catalogCurrent({id:id}).then(res=>{
      // console.log(res.data);
      let {currentCategory}=res.data
      this.currentCategory=currentCategory
    })
    }
  },
};
</script>
 
<style lang = "less" scoped>
/deep/.van-sidebar {
  height: 90vh;
}
/deep/.van-divider::before,
.van-divider::after {
  border-width: 5px 0 0;
}
/deep/.van-divider {
  div {
    margin: 0 5px;
    font-size: 0.15rem;
  }
}
.tag {
  display: flex;
  width: 100%;
  height: 90vh;
  background-color: #f7f8fa;
}
.tagShow {
  width: 100%;
  height: 100%;
  background-color: #ffff;
  .imgbox {
    position: relative;
    top: 0;
    left: 0;

    img {
      border-radius: 5px;
      margin-left: 0.1rem;
      box-shadow: 0 0 6px #000;
      filter: brightness(0.5);
    }
    h5 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
  }
}
</style>